<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'coupon-codes-list'}">
          <el-button :round="true" icon="el-icon-back" plain size="small">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row>
        <el-col :span="24">
          <el-form :model="mmsCouponCode" label-width="120px">
            <h4>优惠码 - {{ mmsCouponCode.name }} 数据明细</h4>
            <div class="data-detail">
              <div class="data-detail-model">
                <div class="data-detail-title">已使用</div>
                <div class="data-detail-content">{{dataDetails.hasUsedCount}}<span class="marin-top-5">个</span></div>
              </div>
              <div class="data-detail-model">
                <div class="data-detail-title">优惠金额</div>
                <div class="data-detail-content">$ {{dataDetails.discountTotalAmount}}</div>
              </div>
              <div class="data-detail-model">
                <div class="data-detail-title">成交金额</div>
                <div class="data-detail-content">$ {{dataDetails.orderTotalAmount}}</div>
              </div>
              <div class="data-detail-model">
                <div class="data-detail-title">平均客单价</div>
                <div class="data-detail-content">$ {{dataDetails.averageCustomerUnitPrice}}</div>
              </div>
              <div class="data-detail-model">
                <div class="data-detail-title">平均客单件</div>
                <div class="data-detail-content">{{dataDetails.averageCustomerUnitCount}}<span class="marin-top-5">个</span></div>
              </div>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <hr>
    <table-pagination
        ref="el-search-table"
        :showOperatingButton="false"
        :adaptive="fixOption"
        :columns="columns"
        :fetch="getData"
        :form-options="formOptions"
        :page-sizes="[20, 50, 100]"
        height="300"
        list-field="records"
        method="get"
        page-index-key="page"
        page-size-key="pageSize"
        total-field="totalElements"
        type="remote"
        class="search-form">
      <el-table-column label="订单号" slot="append" width="180px" fixed='left' align='left'>
        <template slot-scope="{row}">
          <a style="color: #1A89FF" @click="goToOrderDetail(row.orderId)" >{{ row.orderNum }}</a>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import {getDataDetailById} from '@/api/coupon-code';
import {mapGetters} from 'vuex';
import TablePagination from '_c/Tables/table-pagination';
import {utcFormat} from '@/utils/filters';

export default {
    name: 'coupon-codes-data',
    components: {TablePagination},

    data: function () {
        return {
            mmsCouponCode: {
                name: '',
                consumeMoney: '',
                reduction: '',
                tradeTime: '',
                beginDate: '',
                endDate: '',
                couponCode: '',
                joinCount: '',
                limitCount: '',
                isShow: true,
                superpositionFlag: false

            },
            dataDetails: {
                hasOccupiedCount: '',
                hasUsedCount: '',
                discountTotalAmount: '',
                orderTotalAmount: '',
                averageCustomerUnitPrice: '',
                averageCustomerUnitCount: ''
            },
            fixOption: {fixedHeader: true},
            pageParams: {
                page: 1,
                pageSize: 20,
                couponCodeId: this.$route.params.id,
                memberEmail: '',
                orderNum: '',
                beginDate: '',
                endDate: ''
            },
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].resetFields();
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    {prop: 'orderNum', label: '订单号：', placeholder: '请输入订单号'},
                    {prop: 'memberEmail', label: '顾客邮箱：', placeholder: '请输入顾客邮箱'},
                    {
                        prop: ['beginDate', 'endDate'],
                        label: '更新时间：',
                        itemType: 'daterange',
                        startPlaceholder: ' 开始日期',
                        endPlaceholder: ' 结束日期'
                    }
                ]
            },
            columns: [
                // {label: '订单号', prop: 'orderNum'},
                {label: '顾客邮箱', prop: 'memberEmail'},
                {label: '使用状态', prop: 'useStatus'},
                {label: '支付状态', prop: 'payStatus'},
                {label: '更新时间',
                    render: row => {
                        return utcFormat(row.updateTime, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    }},
                {label: '商品数', prop: 'itemCount'},
                {label: '优惠码抵扣金额', prop: 'reducePrice'},
                {label: '订单金额', prop: 'orderPayPrice'}
            ]
        };
    },
    methods: {
        handleReset (name) {
            this.$router.push({name: name});
        },
        goToOrderDetail (id) {
            this.$router.push({name: 'order-detail', params: {id}});
        },
        getData (params) {
            return new Promise((resolve, reject) => {
                getDataDetailById({...this.pageParams, ...params}).then(res => {
                    console.info(res);
                    this.mmsCouponCode = res.data.mmsCouponCode;
                    this.dataDetails = res.data;
                    resolve(res);
                    ;
                });
            });
        }
    },
    computed: {
        ...mapGetters(['timeZone']),
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
}
;

</script>

<style lang="scss" scoped>
.data-detail {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  .data-detail-model {
    flex: 1;
    text-align: center;
    .data-detail-title {
      height: 50px;
      line-height: 50px;
    }
    .data-detail-content {
      font-size: 28px;
      .marin-top-5 {
        font-size: 12px;
        padding-top: 5px;
      }
    }
  }
}
</style>

<style>
.search-form /deep/ .search-table-info  {
  height: 0;
  padding: 0;
}
</style>
